<template>
	<view class="userLayout pageBg">
		<view class="logined" v-if="login">
			<view class="userInfo">
				<view class="avatar">
					<image v-if="user.profilePicture" :src="user.profilePicture + '?t=' + Date.now()" class="avatar"
						mode="aspectFill" />
					<!-- 当没有提供 profilePicture 时，显示默认图片 -->
					<image v-else src="../../static/image/user/user.jpg" class="avatar" mode="aspectFill" />
				</view>
				<view class="username">{{ user.username }}</view>
				<view class="userid">{{ user.userId }}</view>
				<!-- <view class="address">湖南</view> -->
			</view>
			<view class="user-stats">
				<navigator url="/pages/MyPosts/MyPosts" class="stat-publish">
					<view class="count">{{ format(user.myPostCount) }}</view>
					<view class="label">发布</view>
				</navigator>
				<navigator :url="`/pages/Follow/Follow`" class="stat-subscribe">
					<view class="count">{{ format(user.followCount) }}</view>
					<view class="label">关注</view>
				</navigator>
				<navigator :url="`/pages/Fans/Fans`" class="stat-fans">
					<view class="count">{{ format(user.followerCount) }}</view>
					<view class="label">粉丝</view>
				</navigator>
			</view>

			<view class="service">
				<view class="service-tltle">推荐服务</view>
				<view class="service-content">
					<navigator url="/pages/PublishView/PublishView" class="service-item">
						<uni-icons type="plus" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">创建帖子</view>
					</navigator>
					<navigator url="/pages/KitchenView/KitchenView" class="service-item">
						<uni-icons type="home" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">智能厨房</view>
					</navigator>
					<navigator url="/pages/DietManagement/DietManagement" class="service-item">
						<uni-icons type="calendar" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">饮食管理</view>
					</navigator>
					<navigator url="/pages/CreateDish/CreateDish" class="service-item">
						<uni-icons type="color" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">创意菜谱</view>
					</navigator>
					<navigator url="/pages/MapView/MapView" class="service-item">
						<uni-icons type="map" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">附近美食</view>
					</navigator>
					<view class="service-item" @click="building">
						<uni-icons type="shop" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">网上超市</view>
					</view>
					<view class="service-item" @click="building">
						<uni-icons type="vip" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">会员特权</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="list">
					<view class="row" @click="toMyStars">
						<view class="left">
							<uni-icons type="star-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">我的收藏</view>
						</view>
						<view class="right">
							<view class="text">{{ user.myCollectionCount }}</view>
							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>

					<view class="row" @click="toBrowsingHistory">
						<view class="left">
							<uni-icons type="eye-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">浏览记录</view>
						</view>
						<view class="right">
							<view class="text">{{ viewCount }}</view>
							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>

					<view @click="handleUserInfoClick" class="row">
						<view class="left">
							<uni-icons type="staff-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">个人信息</view>
						</view>
						<view class="right">
							<view class="text"></view>
							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>

					<view class="row">
						<view class="left">
							<uni-icons type="chatboxes-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">联系客服</view>
						</view>
						<view class="right">

							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="buttonbox">
				<button type="primary" class="primary-button" @click="logout">退出登录</button>
			</view>
		</view>
		<view class="unlogin" v-else>
			<view class="userInfo">
				<view class="avatar">
					<image src="../../static/image/user/user.jpg" mode="aspectFill"></image>
				</view>
				<view class="username">未登录</view>
			</view>
			<view class="buttonbox">
				<button type="primary" class="primary-button" @click="login_test">登录</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		appUrl
	} from '../../main';
	import {
		onShow
	} from '@dcloudio/uni-app' // 导入uniapp页面生命周期钩子
	const login = ref(false)
	const user = ref({
		userId: "",
		username: "",
		phone: "",
		password: "",
		createdAt: "",
		updatedAt: "",
		profilePicture: "",
		bio: "",
		preference: "",
		vcode: "",
		followCount: "",
		followerCount: "",
		myPostCount: "",
		myPostViewCount: "",
		myCollectionCount: "",
		messageCount: ""
	})
	const viewCount = ref()

	const building = () => {
		uni.showToast({
			icon:'none',
			title: "开发中……"
		})
	}
	const format = (num) => {
		if (num >= 100000) {
			return Math.round(num / 10000) + "w"
		} else if (num >= 10000) {
			return (Math.round(num / 1000)) / 10 + "w"
		} else {
			return num
		}
	}

	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '要退出登录吗',
			confirmColor: "#FF4D4F",
			success: function(res) {
				if (res.confirm) {
					console.log('用户退出登录');
					uni.removeStorageSync("token")
					uni.removeStorageSync("userId")
					uni.removeStorageSync("phone")
					login.value = false
					uni.showToast({
						title: '成功退出',
						duration: 1000
					});
					uni.pageScrollTo({
						scrollTop: 0, // 滚动到页面顶部
						duration: 100 // 动画持续时间，单位为ms
					});
				}
			}
		})
	}

	const login_test = () => {
		uni.navigateTo({
			url: "/pages/LoginView/LoginView"
		})
	}


	const handleUserInfoClick = () => {
		uni.navigateTo({
			url: `/pages/UpdateUserInfo/UpdateUserInfo`
		})
	}

	const toMyStars = () => {
		uni.navigateTo({
			url: "/pages/MyStars/MyStars"
		})
	}

	const toBrowsingHistory = () => {
		uni.navigateTo({
			url: "/pages/BrowsingHistory/BrowsingHistory"
		})
	}

	//钩子
	onShow(() => {
		const token = uni.getStorageSync("token")
		if (token !== null && token !== "") {
			uni.request({
					url: appUrl + '/users/getUser',
					header: {
						'token': uni.getStorageSync('token') //自定义请求头信息
					},
					method: "get"
				}).then(res => {
					user.value = res.data.data
					uni.setStorageSync("userId", res.data.data.userId)
					uni.setStorageSync("username",res.data.data.username)
					uni.setStorageSync("phone", res.data.data.phone)
					login.value = true
				})
				.catch(error => {
					uni.showToast({
						icon: 'error',
						title: '用户登录过期'
					})
				});

			uni.request({
				url: appUrl + '/postView/getall',
				header: {
					'token': token
				},
				method: "POST"
			}).then((res) => {
				if (res.data.status == 200) {
					viewCount.value = res.data.data.length
				} else {
					console.log('服务异常');
				}
			})
		}
	})
</script>

<style lang="scss" scoped>
	.userLayout {
		height: 120vh;

		.userInfo {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 200rpx 50rpx 100rpx 50rpx;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.username {
				font-size: 44rpx;
				color: #333;
			}

			.userid {
				font-size: 28rpx;
				color: #999;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}
		}

		.user-stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10rpx;
			padding: 30rpx;

			.stat-publish {
				text-align: center;

				.count {
					font-size: 20px;
					color: #333;
				}

				.label {
					font-size: 14x;
					color: #666;
					margin-top: 5px;
				}
			}

			.stat-subscribe {
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				text-align: center;

				.count {
					font-size: 20px;
					color: #333;
				}

				.label {
					font-size: 14px;
					color: #666;
					margin-top: 5px;
				}
			}

			.stat-fans {
				text-align: center;

				.count {
					font-size: 20px;
					color: #333;
				}

				.label {
					font-size: 14px;
					color: #666;
					margin-top: 5rpx;
				}
			}
		}

		.service {
			width: 690rpx;
			margin: 50rpx auto;

			.service-tltle {
				font-size: 16px;
			}

			.service-content {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 10rpx;
				padding-top: 40rpx;
				row-gap: 40rpx;

				.service-item {
					text-align: center;

					.service-item-label {
						font-size: 12px;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}

		.section {
			width: 690rpx;
			margin: 50rpx auto;
			border: 1px solid #eee;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

			.list {
				.row {
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					height: 100rpx;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: 0;
					}

					.right {
						display: flex;
						align-items: center;

						.text {
							font-size: 28rpx;
							color: #aaa;
						}
					}

					.left {
						display: flex;
						align-items: center;

						.text {
							padding-left: 20rpx;
							color: #666;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.buttonbox {
			width: 690rpx;
			margin: 50rpx auto;

			button {
				height: 80rpx;
				margin: 20rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.primary-button {
				background-color: #FF4D4F;
			}

			.plain-button {
				color: #FF4D4F;
				border: 1px solid #FF4D4F;
			}


		}
	}
</style>